<template>
    <div v-loading="loading">
        <div class="queryForm">
            <el-input size="large"  v-model="queryParams.meansName" placeholder="请输入关键字" style="width: 500px;">
                <template #append><el-button class="btn" @click="handleQuery">搜索</el-button></template>
            </el-input>
        </div>
        <el-divider></el-divider>
        <el-row>
            <el-col>
                <ul v-if="dataList.length > 0">
                    <li v-for="item in dataList" :key="item.id" @click="handleDetail(item)">
                        <RouterLink target="_blank" :to="{ path: '/viewItemFile', query: { id: item.meansUploadAtt[0].attachId } }">
                        <el-row>
                            <el-col :span="22" :xs="18" :sm="18" class="ellipsis">
                                <span>{{ item.meansName }}</span>
                            </el-col>
                            <el-col :span="2" :xs="6" :sm="6" style="text-align: center;color: #999">{{
                                item.createTime }}</el-col>
                        </el-row>
                        </RouterLink>
                    </li>
                </ul>
                <el-empty description="暂无数据" v-else />
                <pagination style="margin-top: 15px" v-show="total > 0" :total="total" v-model:page="queryParams.page"
                    v-model:limit="queryParams.rows" @pagination="getList" />
            </el-col>
        </el-row>
    </div>
</template>
    
<script setup name="popularScienceKnowledge">
import { getAllList } from "@/api/knowledgeLearn/technicalData.js"
import {useWebsocket} from "@/utils/socket"

const option = ref([]);
const dataList = ref([]);
const loading = ref(false);
const total = ref(0);
const data = reactive({
    queryParams: {
        page: 1,
        rows: 10,
        meansName: undefined,
        releaseColumn: '科普知识',
        releaseStatus:0,
    },
})
const { queryParams, } = toRefs(data);

function handleQuery() {
    queryParams.value.page = 1;
    getList();
}

function handleDetail(item) {
    router.push({
        path: '/knowledgeLearn/regulatoryStandard/regulatoryStandardDetail',
        query: { id: item.id }
    })
}

/** 查询数据列表 */
function getList() {
    loading.value = true;
    getAllList({ ...queryParams.value }).then(response => {
        dataList.value = response.data.rows ? response.data.rows : [];
        total.value = response.data.total;
        loading.value = false;
    }).catch(err=>{loading.value = false;});
}

// WebSocket
const ws = useWebsocket()
ws.onmessage = (e) => {
    if(JSON.parse(e.data).moduleType=='infDelivery'){
      getAllList({ ...queryParams.value }).then(response => {
        dataList.value = response.data.rows ? response.data.rows : [];
        total.value = response.data.total;
      });
    }else if(JSON.parse(e.data).moduleType=='typeManage'){
      getType();
    }
  };

//页面卸载，关闭socket
onUnmounted(() => {
  ws.close();
});

onMounted(() => {
    getList();
})
</script>
    
<style scoped lang="scss">
.queryForm {
    padding: 20px 30px;
    width: 100%;
    text-align: center;
    margin: 10px 0px;

    .el-input-group__append {
        background-color: #107ce5 !important;
        color: #fff !important;
    }

    .btn {
        height: 40px;
        background-color: #107ce5 !important;
        color: #fff !important;
        border-radius: 0px !important;
    }
}

.tag {
    display: flex;
    justify-content: space-between;
    color: #333333;

    span {
        height: 30px;
        line-height: 30px;
        display: inline-block;
    }

    .spanStyles {
        display: inline-block;
        padding: 0px 10px;
        height: 30px;
        line-height: 30px;
        border-radius: 4px;
    }

    .active {
        color: #107ce5;
        background-color: #c6e2ff;
    }
}
li {
    color: #333;
    margin: 30px 0;
    font-size: 16px;
}

ul li::marker {
    font-size: 20px;
}

li:hover {
    color: #107ce5;
    cursor: pointer;
}

.ellipsis {
    display: inline-block;
    // width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
    
    